﻿<%@ Page Title="Calendar" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Calendar.aspx.cs" Inherits="BeyondAdmin.WebForms.Pages.Calendar" %>

<asp:Content ID="Main" ContentPlaceHolderID="MainContent" runat="server">
    <div class="row">
        <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
            <div class="widget flat">
                <div class="widget-header bordered-bottom bordered-orange">
                    <i class="widget-icon glyphicon glyphicon-plus orange"></i>
                    <span class="widget-caption">Add Events By Dragging</span>
                </div>
                <!--Widget Header-->
                <div class="widget-body">

                    <div id='external-events'>
                        <div class='external-event'>Lunch with Mary</div>
                        <div class='external-event'>Session in Office</div>
                        <div class='external-event'>Jane's Birthday</div>
                        <div class='external-event'>University Lecture</div>
                        <div class='external-event'>Shopping Time</div>
                        <p>
                            <label>
                                <input type="checkbox" id='drop-remove' checked="checked">
                                <span class="text">Remove After Drop</span>
                            </label>
                        </p>
                    </div>

                </div>
                <!--Widget Body-->
            </div>
        </div>
        <div class="col-lg-9 col-md-9 col-sm-12 col-xs-12">
            <div class="widget flat">
                <div class="widget-header bordered-bottom bordered-sky">
                    <i class="widget-icon fa fa-calendar sky"></i>
                    <span class="widget-caption">Events and Schedules</span>
                </div>
                <!--Widget Header-->
                <div class="widget-body no-padding">
                    <div id='calendar'></div>
                    <!--Widget Main Container-->
                </div>
                <!--Widget Body-->
            </div>
        </div>
    </div>
</asp:Content>
<asp:Content ID="Scripts" ContentPlaceHolderID="PageScriptContent" runat="server">
    <script src='/assets/js/fullcalendar/moment.min.js'></script>
    <script src='/assets/js/fullcalendar/jquery-ui.custom.min.js'></script>
    <script src='/assets/js/fullcalendar/fullcalendar.min.js'></script>
    <script>
        $(document).ready(function () {
            /* initialize the external events
            -----------------------------------------------------------------*/
            $('#external-events .external-event').each(function () {

                // store data so the calendar knows to render an event upon drop
                $(this).data('event', {
                    title: $.trim($(this).text()), // use the element's text as the event title
                    stick: true // maintain when user navigates (see docs on the renderEvent method)
                });

                // make the event draggable using jQuery UI
                $(this).draggable({
                    zIndex: 999,
                    revert: true,      // will cause the event to go back to its
                    revertDuration: 0  //  original position after the drag
                });

            });
            /* initialize the calendar
            -----------------------------------------------------------------*/
            var date = new Date();
            var d = date.getDate();
            var m = date.getMonth();
            var y = date.getFullYear();

            $('#calendar').fullCalendar({
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,agendaWeek,agendaDay'
                },
                editable: true,
                droppable: true, // this allows things to be dropped onto the calendar
                drop: function () {
                    // is the "remove after drop" checkbox checked?
                    if ($('#drop-remove').is(':checked')) {
                        // if so, remove the element from the "Draggable Events" list
                        $(this).remove();
                    }
                },
                events: [
				{
				    title: 'All Day Event',
				    start: new Date(y, m, 1),
				    textColor: '#5db2ff',
				    borderColor: '#5db2ff'
				},
				{
				    title: 'Long Event',
				    start: new Date(y, m, d - 5),
				    end: new Date(y, m, d - 2),
				    borderColor: '#a0d468'
				},
				{
				    id: 999,
				    title: 'Repeating Event',
				    start: new Date(y, m, d - 3, 16, 0),
				    allDay: false,
				    borderColor: '#ffce55'

				},
				{
				    id: 999,
				    title: 'Repeating Event',
				    start: new Date(y, m, d + 4, 16, 0),
				    allDay: false,
				    borderColor: '#fb6e52'
				},
				{
				    title: 'Meeting',
				    start: new Date(y, m, d, 10, 30),
				    allDay: false,
				    borderColor: '#e75b8d'
				}
                ,
				{
				    title: 'Awesome Plan',
				    start: new Date(y, m, d - 17, 2, 20),
				    end: new Date(y, m, d - 14, 14, 0),
				    allDay: false,
				    borderColor: '#a0d468'
				},
				{
				    title: 'Lunch',
				    start: new Date(y, m, d, 12, 0),
				    end: new Date(y, m, d, 14, 0),
				    allDay: false,
				    borderColor: '#2dc3e8'
				},
				{
				    title: 'Birthday Party',
				    start: new Date(y, m, d + 1, 19, 0),
				    end: new Date(y, m, d + 1, 22, 30),
				    allDay: false,
				    borderColor: '#ed4e2a'
				},
				{
				    title: 'Click for Google',
				    start: new Date(y, m, 28),
				    end: new Date(y, m, 29),
				    url: 'http://google.com/'
				}
                ]
            });


        });
    </script>
</asp:Content>
